<script setup lang='ts'>
import { reactive, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useInfoStore } from "../../store/modules/info.js";
import OutCall from './outCall.vue'
import InCall from './inCall.vue'
import OutLine from './outLine.vue'
import ws from "../../utils/websocket.js";
import { ElMessageBox, ElMessage } from 'element-plus'
defineOptions({
    name: 'Home'
})

// let timer = null;
onMounted(() => {
    if (!useInfoStore().SET_loginStatus) {
        state.pageLoading = true;
    } else {
        state.pageLoading = false;
    }
    if (useInfoStore().deviceUseStatus === '0') {
        ipcRenderer.on('electron-dudutalk3-code', (event, obj) => {
            if (obj[obj.length - 1] === '/') {
                obj = obj.substring(0, obj.length - 1)
            }
            if (useInfoStore().deviceUseStatus === '0') {
                ipcRenderer.on('electron-dudutalk3-code', (event, obj) => {
                    if (obj[obj.length - 1] === '/') {
                        obj = obj.substring(0, obj.length - 1)
                    }
                    state.phone = obj;
                    startCall()
                })
            } else {
                ElMessage({
                    type: 'warning',
                    message: "此设备已被占用"
                })

            }
        })

    } else {
        ElMessage({
            type: 'warning',
            message: "此设备已被占用"
        })
    }
})


onUnmounted(() => {
    // clearInterval(timer)
    state.showDialog = false
})

const state = reactive({
    topData: [
        {
            title: '呼出',
            count: 296
        },
        {
            title: '呼入',
            count: 66
        },
        {
            title: '有效',
            count: 45
        },
        {
            title: '无效',
            count: 21
        }
    ],
    //-1离线, 0空闲，1通话中 2呼出/入中 3拨号中 4结束
    // deviceStatus: 0,
    phone: '',
    value1: 10,
    value2: 10,
    inCall: 0, //,0呼入 1呼出
    callStatus: 2,//-1,结束,0呼入 1呼出,2空闲
    nowTime: null,
    lastTime: null,
    bleName: 'saisiyun05', //蓝牙名称
    pageLoading: false,
    startCallLoading: false,
    isWin: process.platform === 'win32',
    showDialog: false,//关闭应用dialog
    dialogTips: '',
    dialogIsLogout: false,//
})

const router = useRouter()
const logOut = () => {
    // router.push({ name: 'Login' })
    // state.deviceStatus = 0
    // ws.sendSock('logout')
    // ws.sendSock('hangup')
    if (useInfoStore().deviceUseStatus !== '0') {
        state.showDialog = true;
        state.dialogIsLogout = true;
        state.dialogTips = '正在通话中，是否退出？'
        // ws.sendSock('logout')
        // setTimeout(() => {
        //     ws.websocketclose();
        //     router.push({ name: 'Login' })
        //     // clearInterval(timer)
        //     // state.deviceStatus = 0
        //     useInfoStore().SET_deviceStatus('-1')
        //     useInfoStore().SET_deviceUseStatus('0')
        //     state.phone = ''
        //     state.dialogIsLogout = false;
        // }, 1000);
    } else {
        ws.sendSock('logout')
        useInfoStore().SET_wsIsClose(true)
        setTimeout(() => {
            ws.websocketclose();
            router.push({ name: 'Login' })
            // clearInterval(timer)
            // state.deviceStatus = 0
            useInfoStore().SET_deviceStatus('-1')
            useInfoStore().SET_deviceUseStatus('0')
            state.phone = ''
            state.dialogIsLogout = false;
            state.showDialog = false
        }, 1000);
    }

    // setTimeout(() => {
    //     ws.websocketclose();
    //     router.push({ name: 'Login' })
    //     // clearInterval(timer)
    //     // state.deviceStatus = 0
    //     useInfoStore().SET_deviceStatus('-1')
    //     useInfoStore().SET_deviceUseStatus('0')
    //     state.phone = ''
    // }, 1000);

}

const dialogLogOut = () => {
    ws.sendSock('hangup')

    ws.sendSock('logout')
    setTimeout(() => {
        ws.websocketclose();
        router.push({ name: 'Login' })
        // clearInterval(timer)
        // state.deviceStatus = 0
        useInfoStore().SET_deviceStatus('-1')
        useInfoStore().SET_deviceUseStatus('0')
        state.phone = ''
        state.dialogIsLogout = false;
        state.showDialog = false
        useInfoStore().SET_wsIsClose(true)
    }, 1000);
}

const stop = () => {
    // clearInterval(timer)
}

// 长按清空，单击删除一位
const mousedown = () => {
    state.lastTime = new Date();
}
const mouseUp = () => {
    state.nowTime = new Date();
    if (state.nowTime - state.lastTime > 0.8 * 1000) {
        state.phone = '';
    } else {
        if (state.phone.length === 0) return;
        state.phone = state.phone.substr(0, state.phone.length - 1);
    }
}

// 结束通话
const changeCallStatus = () => {
    state.callStatus = 2;
    // state.deviceStatus = 0
}

// 开始拨号
const startCall = () => {
    if (!state.phone) return;
    state.startCallLoading = true;
    // useInfoStore().SET_lastCall({ deviceNo: useInfoStore().deviceNo, phone: state.phone })
    useInfoStore().SET_nowCall(state.phone)
    const rag = `dial,${state.phone}`
    ws.websocketsend(rag)
    setTimeout(() => {
        // state.callStatus = 0;
        useInfoStore().SET_deviceUseStatus('1')
        state.startCallLoading = false;
        state.phone = '';
    }, 1500);
}

// 回拨
let flag = false;
const callBack = () => {
    state.startCallLoading = true;
    if (!getLastPhone(useInfoStore().deviceNo, useInfoStore().lastCall)) return;
    // useInfoStore().SET_lastCall({ deviceNo: useInfoStore().deviceNo, phone: state.phone })
    // useInfoStore().SET_nowCall(getLastPhone(useInfoStore().deviceNo, useInfoStore().lastCall))
    // console.log(getLastPhone(useInfoStore().deviceNo, useInfoStore().lastCall),'回拨');

    const rag = `dial,${getLastPhone(useInfoStore().deviceNo, useInfoStore().lastCall)}`
    ws.websocketsend(rag)
    setTimeout(() => {
        if (useInfoStore().deviceUseStatus === '1') {
            state.startCallLoading = false;
        }
    }, 10);

    // setTimeout(() => {
    //     // state.callStatus = 0;
    //     useInfoStore().SET_deviceUseStatus('1')
    //     state.startCallLoading = false;
    //     // state.phone = '';
    // }, 1500);
}
function getLastPhone(deviceNo, arr) {
    if (arr.length === 0) return;
    let str = '';
    arr.map(item => {
        if (item.deviceNo === deviceNo) {
            str = item.phone
        }

    })
    return str;

}
const { ipcRenderer } = require("electron");

// 显示关闭应用dialog
const closeWin = () => {
    state.showDialog = true;
    if (useInfoStore().deviceUseStatus === '0') {
        state.dialogTips = '是否关闭？'
    } else {
        state.dialogTips = '正在通话中，是否关闭？'
    }

}
// 关闭dialog
const closeDialog = () => {
    state.showDialog = false;

}

// 确定关闭app
const closeApp = () => {
    ws.sendSock('hangup')
    ws.sendSock('logout');
    state.showDialog = false;
    setTimeout(() => {
        ipcRenderer.send('window-close')
        router.push({ name: 'Login' })
    }, 1000);
}

// 最小化应用
const miniWin = () => {
    // console.log(ipcRenderer, 'ipcRenderer');
    ipcRenderer.send('window-min')
}


</script>

<template>
    <div class="home ele_drag">
        <div class="nav" v-if="state.isWin">
            <div class="nav-left">
                <img src="../../assets/logo@2x.png" alt="">
            </div>
            <!-- win自定义菜单栏 -->
            <div class="nav-right">
                <div class="mini no_drag" @click="miniWin">
                    <img src="../../assets/minimize@2x.png" alt="">
                </div>
                <div class="close no_drag" @click="closeWin"><img src="../../assets/close@2x.png" alt=""></div>
            </div>
        </div>
        <!-- mac自定义菜单栏 -->
        <div class="mac-nav" v-else>
            <div class="mac-nav-left">
                <div class="close no_drag" @click="closeWin"><img src="../../assets/close@2x.png" alt=""></div>

                <div class="mini no_drag" @click="miniWin">
                    <img src="../../assets/minimize@2x.png" alt="">
                </div>
            </div>
            <div class="mac-nav-center">
                <img src="../../assets/logo@2x.png" alt="">
            </div>
        </div>
        <div class="home-top">
            <div class="home-top-header">
                <div class="header-left">
                    <!-- 设备在线 1 -->
                    <div class="img" v-if="useInfoStore().deviceStatus !== '0'">
                        <img src="../../assets/deviceLogo@2x.png" alt="">
                    </div>
                    <!-- 设备不在线 0 -->
                    <div class="img" v-if="useInfoStore().deviceStatus === '0'">
                        <img src="../../assets/deviceOutline@2x.png" alt="">
                    </div>
                    <div class="left-info">
                        <div class="info-device-no">
                            <div :title="useInfoStore().deviceNo">{{ useInfoStore().deviceNo }}</div>
                        </div>

                        <div class="info-title" v-if="useInfoStore().bleStatus === '1'">
                            <img src="../../assets/bleonline@2x.png" alt="">
                            <span>{{ useInfoStore().bleName }}</span>
                        </div>
                        <div class="info-title" v-else>
                            <img src="../../assets/bleOutline@2x.png" alt="">
                            <span>蓝牙未连接</span>
                        </div>
                        <!-- <el-button @click="stop">停止</el-button> -->
                    </div>
                </div>
                <div class="header-right no_drag" @click="logOut">
                    <img src="../../assets/logOut@2x.png" alt="">
                </div>
            </div>
            <div class="home-top-body">
                <div class="top-body-item" v-for="item in state.topData" :key="item">
                    <div class="body-item-count">{{ item.count }}</div>
                    <div class="body-item-title">{{ item.title }}</div>
                </div>
            </div>
        </div>

        <!-- (0-空闲,1-拨号中，2-来电中，3-已接通 -->
        <div class="home-center " v-loading="state.pageLoading"
            v-if="useInfoStore().deviceStatus === '1' && useInfoStore().bleStatus === '1' && useInfoStore().deviceUseStatus === '0'">
            <div class="home-center-status"> 当前设备:
                <span v-if="useInfoStore().deviceUseStatus === '0'">空闲中</span>
                <span class="status-use" v-else>{{ useInfoStore().deviceUseStatus === '1' ? '拨号中' :
                    useInfoStore().deviceUseStatus === '2' ? '呼出中' :
                        '已接通' }}</span>
            </div>
            <el-input v-model="state.phone" maxlength="11" class="input-style no_drag" />
            <img @mousedown="mousedown" @mouseup="mouseUp" class="delete-phone no_drag" src="../../assets/delete@2x.png"
                alt="">
            <div class="home-center-logs">
                <div class="logs-left">
                    <div class="icon">
                        <img v-if="useInfoStore().lastCall.map(item => item.phone !== '')" src="../../assets/outCall@2x.png"
                            alt="">
                        <img v-else src="../../assets/inCall@2x.png" alt="">
                    </div>
                    <div class="logs-title">最近通话</div>
                    <div class="logs-phone">{{ getLastPhone(useInfoStore().deviceNo, useInfoStore().lastCall) }}</div>
                </div>
                <div class="logs-right no_drag" @click="callBack">回拨</div>
            </div>
            <el-button class="home-center-call no_drag" @click="startCall">
                <img src="../../assets/startCall@2x.png" alt="">
            </el-button>
            <el-divider />
            <div class="home-center-ctrl">
                <div>
                    <img src="../../assets/earphone@2x.png" alt="">
                    <el-slider class="no_drag" v-model="state.value1" :min="0" :max="10" />
                </div>
                <div><img src="../../assets/microphone@2x.png" alt=""><el-slider :min="0" :max="10" class="no_drag"
                        v-model="state.value2" />
                </div>
            </div>
        </div>
        <!-- 离线 -->
        <transition name="fade" mode="out-in">
            <keep-alive>
                <OutLine :deviceStatus="useInfoStore().deviceStatus"
                    v-if="useInfoStore().deviceStatus === '0' || useInfoStore().bleStatus === '0'"></OutLine>
            </keep-alive>
        </transition>
        <!-- <OutLine :deviceStatus="useInfoStore().deviceStatus" v-if="useInfoStore().deviceStatus === '0'"></OutLine> -->

        <!-- 呼入 -->
        <transition v-if="useInfoStore().deviceStatus === '1' && (useInfoStore().deviceUseStatus === '1' || useInfoStore().deviceUseStatus === '2' || useInfoStore().deviceUseStatus === '3')" name="fade" mode="out-in">
            <keep-alive>
                <OutCall
                    
                    :deviceStatus="useInfoStore().deviceStatus" @changeCallStatus="changeCallStatus">
                </OutCall>
            </keep-alive>
        </transition>
        <!-- <OutCall v-if="useInfoStore().deviceStatus === '1'&& (useInfoStore().deviceUseStatus === '1' ||useInfoStore().deviceUseStatus === '3') "
            :deviceStatus="useInfoStore().deviceStatus" @changeCallStatus="changeCallStatus">
        </OutCall> -->
        <el-dialog custom-class="close-app-dialog no_drag " v-model="state.showDialog" title="" width="30%"
            :show-close="false">
            <img src="../../assets/closeApp@3x.png" alt="">
            <span class="tips-text">{{ state.dialogTips }}</span>
            <div class="sure-btn" @click="closeDialog">继续使用</div>
            <div v-if="!state.dialogIsLogout" class="close-btn" @click="closeApp">关闭应用</div>
            <div v-else class="close-btn" @click="dialogLogOut">退出登录</div>
        </el-dialog>

    </div>
</template>

<style lang='scss' scoped>
.home {
    width: 308px;
    height: 579px;
    padding: 45px 20px 0 20px;
    position: relative;
    // background: #E0E7EF;
    // box-shadow: 0px 0px 132px 0px rgba(0, 0, 0, 0.23);
    // border-radius: 10px;
    // backdrop-filter: blur(40px);
    position: relative;
    background-image: url("../../assets/homeBg2x.png");
    background-size: 100% 100%;
    overflow: hidden;

    .nav {
        height: 33px;
        line-height: 16px;
        width: 348px;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .nav-left {
            height: 12px;
            width: 93px;
            margin-left: 16px;
            margin-bottom: 16.5;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .nav-right {
            display: flex;

            .mini,
            .close {
                width: 14px;
                height: 14px;
                margin-right: 9px;
                cursor: pointer;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }
    }

    .mac-nav {
        height: 33px;
        line-height: 16px;
        width: 348px;
        position: absolute;
        top: 0;
        display: flex;
        // justify-content: space-between;
        align-items: center;

        .mac-nav-left {
            display: flex;

            .mini,
            .close {
                width: 14px;
                height: 14px;
                margin-right: 9px;
                cursor: pointer;

                img {
                    width: 100%;
                }
            }
        }

        .mac-nav-center {
            // height: 12px;
            width: 93px;
            margin-left: 70px;

            // margin-bottom: 20;
            img {
                width: 100%;
            }
        }
    }

    .home-top {
        width: 288px;
        height: 121px;
        background: linear-gradient(180deg, #F4F9FD 0%, #EFF4FA 100%);
        //box-shadow: 0px 10px 13px 2px rgba(113, 125, 144, 0.09); 
        border-radius: 10px;
        backdrop-filter: blur(0px);
        margin-bottom: 22px;
        padding: 11px;

        .home-top-header {
            width: 100%;
            height: 62px;
            border-bottom: 1px solid #8795A426;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;

            .header-left {
                display: flex;
                align-items: center;

                .img {
                    width: 64px;
                    height: 64px;
                    border-radius: 50%;
                    // margin-right: 10px;
                    margin-left: -20px;
                    transform: scale(0.5);
                    // img {
                    //     width: 100%;
                    //     height: 100%;
                    // }
                }

                .info-title {
                    font-size: 10px;
                    font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
                    font-weight: 400;
                    color: #8795A4;
                    display: flex;
                    align-items: center;

                    img {
                        width: 12px;
                        height: 12px;
                        margin-right: 4px;
                        margin-left: -2px;
                    }
                }

                .info-device-no {
                    font-size: 16px;
                    font-family: AlibabaPuHuiTiM;
                    color: #414D59;
                    max-width: 200px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }

            .header-right {
                position: absolute;
                top: 0;
                right: 0;
                cursor: pointer;
                font-size: 12px;
                width: 14px;
                height: 14px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .home-top-body {
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .top-body-item {
                width: 71px;
                text-align: center;
                margin-top: 10px;

                .body-item-count {
                    font-size: 18px;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #414D59;
                }

                .body-item-title {
                    font-size: 10px;
                    font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
                    font-weight: 400;
                    color: #8795A4;
                }
            }
        }
    }

    .home-center {
        height: 327px;
        width: 288px;
        background: linear-gradient(180deg, #F4F9FD 0%, #EFF4FA 100%);
        box-shadow: 0px 10px 8px 2px rgba(113, 125, 144, 0.09);
        border-radius: 10px;
        backdrop-filter: blur(0px);
        padding: 11px;
        position: relative;

        .delete-phone {
            position: absolute;
            right: 21px;
            top: 63px;
            width: 30px;
            height: 17px;
            cursor: pointer;
        }

        .home-center-status {
            font-size: 12px;
            font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
            font-weight: 400;
            color: #414D59;
            padding-bottom: 14px;

            span {
                color: #0FC056;
            }

            .status-use {
                color: red;
            }
        }

        .input-style {
            // width: 286px;
            height: 59px;
            background: #FFFFFF;
            box-shadow: 0px 5px 4px 0px rgba(123, 170, 251, 0.12);
            border-radius: 5px;
            // border: 1px solid #6BA0FB;

            :deep(.el-input__inner) {
                font-size: 32px;
                height: 59px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #414D59;
            }
        }

        .home-center-logs {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 16px;
            margin-bottom: 32px;

            .icon {
                width: 26px;
                height: 26px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .logs-left {
                display: flex;
                align-items: center;
                font-size: 12px;
                font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
                font-weight: 400;
                color: #414D59;

                .logs-title {
                    margin: 0 8px;
                }


            }

            .logs-right {
                font-size: 12px;
                font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
                font-weight: 400;
                color: #2074DB;
                cursor: pointer;
            }
        }

        .home-center-call {
            display: block;
            width: 232px;
            height: 40px;
            color: #fff;
            border-radius: 20px;
            margin: 0 auto;
            text-align: center;
            background: linear-gradient(180deg, #0FC056 0%, #0EAB4D 100%);
            box-shadow: 0px 7px 17px 0px rgba(14, 186, 83, 0.35);

            img {
                width: 27px;
                height: 27px;
            }
        }

        .home-center-ctrl {
            width: 50%;
            height: 80px;
            margin-top: 30px;
            margin: 30px auto;

            div {
                display: flex;
                align-items: center;


                img {
                    width: 22px;
                    height: 22px;
                    margin-top: 4px;
                    margin-right: 8px;
                }
            }


            :deep(.el-slider__bar) {
                background-color: #0FC056;
            }

            :deep(.el-slider__button-wrapper) {
                transform: translateX(-50%) scale(0.5);
            }
        }

    }


    .fade-enter-from,
    .fade-leave-to {
        /*定义进入开始和离开结束的透明度为0*/
        opacity: 0;
    }

    .fade-enter-to,
    .fade-leave-from {
        /*定义进入结束和离开开始的透明度为1*/
        opacity: 1;
    }

    .fade-leave-active,
    .fade-enter-active {
        transition: all 0.5s ease-out;
    }

}

/* 主窗口设置了 resizable: false 禁止改变主窗口尺寸，将不可拖动，故需加drag，让其可拖动； */
.ele_drag {
    -webkit-app-region: drag;
    /* 让元素可拖动，设置了drag的元素不可点击 */
}

.no_drag {
    -webkit-app-region: no-drag;
    /* 设置了drag的元素将不可点击，故设置no-drag，让元素可点击 */
}
</style>
<style lang="scss">
.close-app-dialog {
    width: 254px;
    height: 243px;
    background: linear-gradient(180deg, #F4F9FD 0%, #EFF4FA 100%);
    box-shadow: 0px 10px 13px 2px rgba(113, 125, 144, 0.09);
    border-radius: 10px;
    backdrop-filter: blur(0px);

    .el-dialog__header {
        padding: 0;
        margin: 0;

    }

    .el-dialog__body {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 30px 0 17px 0;
        height: calc(100% - 47px);

        .tips-text {
            margin-top: -12px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }

        .sure-btn {
            width: 92px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            background: linear-gradient(180deg, #0FC056 0%, #0EAB4D 100%);
            box-shadow: 0px 7px 17px 0px rgba(14, 186, 83, 0.35);
            border-radius: 3px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #fff;
            cursor: pointer;
        }

        .close-btn {
            width: 92px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
        }
    }

    img {
        width: 92px;
        height: 92px;
    }

}

.no_drag {
    -webkit-app-region: no-drag;
    /* 设置了drag的元素将不可点击，故设置no-drag，让元素可点击 */
}
</style>
